<template>
  <div class="update-name">
    <van-nav-bar
      title="编辑昵称"
      left-text="取消"
      right-text="确定"
      @click-left="$emit('close')"
      @click-right="onClickRight"
    />

    <van-field
      v-model="message"
      rows="2"
      autosize
      type="textarea"
      placeholder="请输入新昵称"
      show-word-limit
      class="message-box"
    />
  </div>
</template>

<script>
import {setUserProfile} from '@/api/user'

export default {
  props: ['value'],
  data() {
    return {
      message: this.value
    }
  },
  methods: {
    async onClickRight() {
      try {
        if(!this.message) {
          return this.$toast('请填写姓名')
        }
        await setUserProfile({
          name: this.message
        })
        //  关闭弹框
        this.$emit('close')
        // 修改父组件的名字
        this.$emit('input', this.message)

        this.$toast('修改名字成功')

      } catch(err) {
        console.log(err)
      }
    }
  }
}
</script>

<style lang="less">
.update-name {
  .van-nav-bar__content {
    background: #1989fa;
    color: #fff;
  }
  .van-nav-bar__title {
    color: #fff;
  }
  .van-nav-bar__text {
    color: #fff;
  }
}

.message-box {
  margin: 20px;
  width: calc(100vw - 40px);
  border: 2px solid #ccc;
}
</style>
